<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
		/>
		<meta name="format-detection" content="telephone=no" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>领取血糖仪</title>
		<!-- 引入 vant UI 组件库样式文件 -->
		<link rel="stylesheet" href="../../common/css/vant-index.css" />
		<link rel="stylesheet" type="text/css" href="../../common/css/common.css" />
		<!-- <link rel="stylesheet" type="text/css" href="../css/baseInfo.css" /> -->
		<style>
			body {
				background-color: #f3f3f5;
			}
			.van-list {
				background-color: #fff;
				padding: 0 0.21rem;
			}
			.select_date {
				height: 1.04rem;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 0.21rem;
			}
			.select_date > img {
				width: 0.5rem;
				height: 0.5rem;
			}
			.table_title {
				height: 0.92rem;
				line-height: 0.92rem;
				padding: 0 0.21rem;
				font-size: 0.33rem;
			}
			.table_item {
				height: 0.92rem;
				line-height: 0.92rem;
				font-size: 0.29rem;
				border-bottom: 1px solid #ebedf0;
			}
			.table_item:last-child {
				background-color: #e22e30;
				/* border-bottom: none; */
			}
			.red {
				background-color: #e22e30;
				color: #fff;
			}
			.van-col {
				text-align: center;
			}
			.van-empty__image,
			.van-empty__image > img {
				height: 4.17rem;
				width: 4.17rem;
			}
			.van-empty__description {
				margin-top: 14px;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<div class="select_date">
				<span style="font-size: 0.29rem">{{searchDate}}</span>
				<img src="img/date.png" @click="showDate = true" />
				<van-popup
					v-model:show="showDate"
					position="bottom"
					:style="{ height: '45%' }"
				>
					<van-datetime-picker
						v-model="currentDate"
						type="date"
						:min-date="minDate"
						:max-date="maxDate"
						:formatter="formatter"
						@cancel="showDate = false"
						@confirm="onConfirmDate"
					/>
				</van-popup>
			</div>
			<div>
				<van-row class="table_title red">
					<van-col span="8">姓名</van-col>
					<van-col span="8">领取时间</van-col>
					<van-col span="8">操作</van-col>
				</van-row>
				<van-list
					v-model="loading"
					:finished="finished"
					finished-text="没有更多了"
				>
					<div class="table_item" v-for="item in list">
						<van-row>
							<van-col span="8"
								>{{item.patientName.length>8?item.patientName.substring(0,7)+'...':item.patientName}}</van-col
							>
							<van-col span="8">{{item.scanTimeStr}}</van-col>
							<van-col
								v-if="item.getStatus == 2"
								style="color: #e22e30"
								span="8"
								@click="handleClick(item)"
								>未上传</van-col
							>
						</van-row>
					</div>
				</van-list>
				<van-empty
					v-if="list.length==0"
					image="img/empty.png"
					description="暂无领取血糖仪订单"
				></van-empty>
			</div>
		</div>
	</body>
	<!-- 上线环境用 -->
	<script src="../../base.js"></script>
	<script src="../../common/js/vue.global.prod.js"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../../common/js/vant.min.js"></script>
	<!-- axios 接口调用 -->
	<script src="../../common/js/axios.min.js"></script>
	<script src="../../common/js/rem.js"></script>
	<script src="../../common/js/url.min.js"></script>

	<script type="module">
		import {
			getAction,
			postAction,
			spliceUrl,
		} from '../../common/js/api/vue3-axios-utils.js'
		const baseInfo = {
			data() {
				return {
					minDate: new Date(1970, 0, 1),
					maxDate: new Date(),
					currentDate: new Date(),
					list: [],
					searchDate: '',
					showDate: false,
					loading: false,
					finished: false,
				}
			},
			computed: {},
			created() {
				this.doctorId = url('?id')
				const date = new Date()
				this.searchDate =
					date.getFullYear() +
					'-' +
					(date.getMonth() + 1 < 9
						? '0' + (date.getMonth() + 1)
						: date.getMonth() + 1) +
					'-' +
					date.getDate()
				this.getList()
			},
			methods: {
				getList() {
					postAction(spliceUrl('/glucometerget/list'), {
						doctorId: +this.doctorId,
						day: this.searchDate,
						pageNum: 1,
						pageSize: 10,
					}).then(res => {
						res = res.data
						if (res.success) {
							this.list = res.result.records
						}
					})
				},
				handleClick(item) {
					window.location.href =
						'./glucometerPhoto.html?id=' + this.doctorId + '&gid=' + item.dataId
				},
				formatter(type, val) {
					if (type === 'year') {
						return `${val}年`
					}
					if (type === 'month') {
						return `${val}月`
					}
					if (type === 'day') {
						return val + '日'
					}
					return val
				},
				onConfirmDate(item) {
					this.list = []
					this.searchDate =
						new Date(item).getFullYear() +
						'-' +
						(new Date(item).getMonth() + 1 < 9
							? '0' + (new Date(item).getMonth() + 1)
							: new Date(item).getMonth() + 1) +
						'-' +
						new Date(item).getDate()
					this.getList()
					this.showDate = false
				},
			},
		}

		const app = Vue.createApp(baseInfo)

		app.use(vant)
		// 通过 CDN 引入时不会自动注册 Lazyload 组件
		// 可以通过下面的方式手动注册
		app.use(vant.Lazyload)
		app.use(vant.Popup)

		// 调用函数组件，弹出一个 Toast
		// vant.Toast("刷新成功");
		app.mount('#app')
	</script>
</html>
